<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>银行卡挂失</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
    <h2>银行卡挂失</h2>
    <form id="reportLossForm" class="row g-3">
        <div class="col-md-6">
            <label for="cardID" class="form-label">银行卡号</label>
            <input type="text" class="form-control" id="cardID" name="cardID" required>
        </div>
        <div class="col-12">
            <button type="button" class="btn btn-warning" onclick="reportLoss()">确认挂失</button>
            <button type="button" class="btn btn-secondary" onclick="resetForm()">重置</button>
            <a th:href="@{/customer/index}" class="btn btn-secondary ms-2">返回首页</a>
        </div>
    </form>

    <div id="resultMessage" class="mt-3 text-danger fw-bold"></div>
</div>

<script>
    function reportLoss() {
        const cardID = document.getElementById("cardID").value.trim();
        if (!cardID) {
            alert("请输入银行卡号！");
            return;
        }

        fetch('/trade/reportLoss', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'token': localStorage.getItem("token") || ''
            },
            body: JSON.stringify({ cardID })
        })
            .then(response => response.json())
            .then(data => {
                const msgBox = document.getElementById("resultMessage");
                if (data.code === 200) {
                    msgBox.innerText = "挂失成功！";
                    msgBox.classList.remove("text-danger");
                    msgBox.classList.add("text-success");
                } else {
                    msgBox.innerText = "挂失失败：" + data.message;
                }
            });
    }

    function resetForm() {
        document.getElementById("cardID").value = "";

    }
</script>
</body>
</html>